
<template>
  <div class="foot">
    <div class="foot-content">
      <div class="foot-course" v-for="(item,index) in footData1" :key="item.title">
        <div class="title" style="margin-bottom:30px;height:12px;width:80px;">
          <span class="dot" v-if="index === 0"></span>
          <span style="font-size:14px;">{{item.title}}</span>
        </div>
        <div class="content" style="font-size:14px;" v-for="_item in item.text" :key="_item">{{_item}}</div>
      </div>
      <div class="foot-company">
        <div class="title" v-for="item in footData2" :key="item" @click="click(item)">
          <span class="dot"></span>
          <span style="font-size:14px;">{{item}}</span>
        </div>
      </div>
      <div class="foot-about">
        <div class="title" style="margin-bottom:16px;font-size:14px;" @click="click(footData3.title)">
          <span class="dot"></span>
          {{footData3.title}}
        </div>
        <div style="font-size:14px;" v-for="item in footData3.text" :key="item" class="content">{{item}}</div>
      </div>
      <div class="qrcode">
        <img src="./qrcode.png" class="qrcode-img" />
        <div style="padding-right:47px;font-size:14px;">腾科教育</div>
      </div>
    </div>
    <div class="foot-mark" style="font-size:12px;">
      Copyright © 2018-2019 广州腾科网络技术有限公司 All rights reserved 粤ICP备12042194号-5
      <div>
        <img src="./wpimg.png" class="wp" />
        <img src="./wximg.png" class="wp" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      footData1: [
        {
          title: "IT认证",
          text: [
            "Cisco认证",
            "HUAWEI认证",
            "Redhat认证",
            "Oracle认证",
            "Hadoop"
          ]
        },
        { title: "", text: ["VCP", "CISP", "PMP", "ITIL python"] }
      ],
      footData2: ["公司动态", "行业信息", "考试中心"],
      footData3: {
        title: "关于腾科教育中心",
        text: ["腾科简介", "教学环境", "资质认证", "考场"]
      }
    };
  },
  methods: {
    click(item) {
      if (item == "公司动态") {
        this.$router.push("/dynamics");
      }
      if (item == "关于腾科教育中心") {
        this.$router.push("/tengkeEd");
      }
      window.scroll(0, 0);
    }
  }
};
</script>
<style lang="stylus">
.foot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1440px;
  height: 482px;
  background-color: #0d0d0d;
  padding: 100px 120px 32px 120px;

  .foot-content {
    display: flex;
    color: #bdbdbd;

    .foot-course:first-child {
      margin-right: 97px;
    }

    .dot {
      display: inline-block;
      vertical-align: middle;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #da0800;
      margin-right: 10px;
    }

    .content {
      line-height: 30px;
      color: #646464;
    }

    .foot-company {
      margin-left: 108px;

      .title {
        margin-bottom: 30px;

        &:first-child:hover {
          cursor: pointer;
        }
      }
    }

    .foot-about {
      margin-left: 108px;
      .title:hover{
        cursor pointer
      }
        
    }

    .qrcode {
      text-align: right;
      flex: 1;

      .qrcode-img {
        width: 150px;
        height: 150px;
        margin-bottom: 15px;
      }
    }
  }

  .foot-mark {
    display: flex;
    color: #656565;
    justify-content: space-between;
    align-items: center;

    .wp {
      width: 20px;
      height: 16px;

      &:first-child {
        margin-right: 16px;
      }
    }
  }
}
</style>
